<template>
<div>
  <el-card class="box-card1">
  <el-form ref="form" :model="form" label-width="100px" style="margin-top: 20px">
    <el-form-item label="项目名称" style="width: 450px">
      <el-input v-model="form.entryname"></el-input>
    </el-form-item>
    <el-form-item label="工程名称" style="width: 450px">
      <el-input v-model="form.projectname"></el-input>
    </el-form-item>
    <el-form-item label="施工开始时间">
      <el-col :span="5">
        <el-date-picker type="date" placeholder="选择日期" v-model="form.starttime" style="width: 100%;"></el-date-picker>
      </el-col>
    </el-form-item>
    <el-form-item label="施工结束时间">
      <el-col :span="5">
        <el-date-picker type="date" placeholder="选择日期" v-model="form.endtime" style="width: 100%;"></el-date-picker>
      </el-col>
    </el-form-item>
    <el-form-item label="是否合格">
      <el-radio-group v-model="form.isqualified">
        <el-radio label="合格"></el-radio>
        <el-radio label="不合格"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="工程量" style="width: 320px">
      <el-input v-model="form.quantities"></el-input>
    </el-form-item>
    <el-form-item label="工程照片">
    <el-upload
      class="avatar-uploader"
      :show-file-list="false"
      action="http://localhost:9999/api/oss/file/uploadImg?module=AHUT"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :data="uploadHeader"
    >
      <img v-if="form.image" :src="form.image">
      <i v-else class="el-icon-plus avatar-uploader-icon"/>
    </el-upload>
    </el-form-item>
    <el-dialog :visible.sync="dialogVisible">
<!--      <img width="100%" :src="dialogImageUrl" alt="">-->

    </el-dialog>
    <el-form-item label="检查内容" style="width: 450px">
      <el-input type="textarea" v-model="form.contents"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit(form)">立即创建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>

  </el-card>
</div>
</template>

<script>
import loadApi from '@/api/img';
import { getToken } from '@/utils/auth'
export default {
  name: 'imgsur',
  data(){
    return{
      dialogImageUrl:'',
      dialogVisible:false,
      //上传需要携带的数据
      uploadHeader:{"token":getToken()},
      form: {
        isqualified:'',
        contents:'',
        starttime:'',
        endtime:'',
        projectname:'',
        entryname:'',
        image:'',
        quantities:''

      }
    }
  },
  methods:{
    /*** 上传校验 * @param file * @returns {boolean} */
    beforeAvatarUpload(file) {
      console.log(file.type)
      const isJPG = file.type === 'image/jpeg'||'image/png'
      // const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 10240 / 10240 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 20MB!')
      }
      return isJPG && isLt2M
    },
    /**
     * * 上传成功回调
     * * @param res *
     * @param file
     * */
    handleAvatarSuccess(res, file) {
      console.log(res)
      this.form.image = res.data
      // 强制重新渲染
      this.$forceUpdate()
    },
    async onSubmit(form){
      console.log(form.entryname)
      console.log(form.image)
      let res = await loadApi.upload(form)
      if (res){
        this.$message.success(res.message)
        this.$router.go(0)
      }else {
        this.$message.error(res.message)
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
}
</script>

<style lang="scss">
//用户头像
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 250px;
  height: 250px;
  line-height: 250px;
  text-align: center;
}

.avatar-uploader img {
  width: 250px;
  height: 250px;
  display: block;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card1 {
  width: 700px;
  margin: 100px auto auto;
  shadow: "always";
}

</style>
